<template>
  <div >
     
        <div class="left_bg">
            <p class="head">ORDER聚造</p>

            <div class="menu">
             <el-menu
      default-active="2"
      :router="true"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="transparent"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>首页管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="/index/banner">轮播图</el-menu-item>
          <el-menu-item index="/index/category">分类区</el-menu-item>
           <el-menu-item index="/index/recommend">推荐</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

       <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="/index/classify">分类</el-menu-item>
          <el-menu-item index="/index/brand">品牌</el-menu-item>
           <el-menu-item index="/index/product">商品</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

         <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>新闻管理</span>
        </template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          <el-menu-item index="/index/news">新闻</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      
    </el-menu>

    </div>
            
        </div>
        <div class="boxtop">
             <p class="set_name">{{$route.meta.title}}</p>
            <!-- <img class="touxiang" src="../assets/img/touxiang.png" alt=""> -->
            <el-avatar :size="50" :src="photo" class="touxiang"></el-avatar>

            <el-tooltip placement="bottom">
            <p class="user">{{nickName}},您好！</p>
            <div slot="content" @click="dialogFormVisible=true" class="editPwd">修改密码</div>
            
             </el-tooltip>


            <el-button type="danger" class="tuicgubox"  @click="logout">退出</el-button>
        </div>

        <div class="right_bg"></div>


         <router-view></router-view>

    
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">         
             <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                 <el-form-item label="原密码" prop="passWord">
                <el-input  type="password" v-model="form.passWord"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassWord">
                <el-input type="password" v-model="form.newPassWord"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="reNewPassWord">
                <el-input type="password" v-model="form.reNewPassWord"></el-input>
            </el-form-item>
          
            <el-form-item>
                <el-button type="primary" @click="changePassWord">提交</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
            </el-form>
            </el-dialog>

  </div>
  
</template>

<script>

import md5 from 'js-md5'

export default {
  name: "index",
  components: {
    //HelloWorld
  },
  data() {

    //   var Pass = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入原密码'));
    //     } else if (value !== this.form.passWord) {
    //       callback(new Error('与密码不一致!'));
    //     } else {
    //       callback();
    //     }
    //   };
      

    //   var validatePass = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入新密码'));
    //     } 

    //   };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.newPassWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

    return {
        photo:"",
        nickName:"",
        dialogFormVisible:false,

         form: {
          passWord: '',
          newPassWord: '',
          reNewPassWord:''
        },
        rules: {
          passWord: [
           {require:true,message:'请输入原密码', trigger: 'blur' }
          ],
          newPassWord: [
            {require:true,message:'请输入新密码', trigger: 'blur' }
          ],
          reNewPassWord: [
             { validator: validatePass2, trigger: 'blur' }
          ]
        }
    };
  },
  methods: {
          handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      logout(){
          this.$confirm("是否退出登录？","提示",{
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type:"warning",
          }).then(() =>{
              this.$http({
                  url:"/admin/logout",
              }).then((res) =>{
                  if(res.errorMsg){
                      this.$message.error(res.errorMsg);
                  }else{
                      localStorage.removeItem('token')
                      localStorage.removeItem('user')
                      location.href="#/login";
                  }
              })
          })
      },

      changePassWord() {
          this.$refs.form.validate((valid)=>{
              if(valid){
                  this.$http({
                      url:'/admin/changePassWord',
                      method:'POST',
                      data:{
                         passWord:md5(this.form.passWord),
                          newPassWord:md5(this.form.newPassWord)
                      }
                  }).then(res=>{
                      if(!res.errorMsg){
                          this.$message({
                              message:'修改密码成功',
                              type:'seccess',
                              duration:3000
                          });
                          setTimeout(()=>{
                               location.href='#/login'
                          },3000)
                         
                      }
                  })
              }
          })
     
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

 
  },
  created() {
      //从缓存获取登录用户信息
      let user=localStorage.getItem("user");
      if(!user){
        //   this.$router.push('/login')
        //   history.reload
        location.href=location.origin + '#/login'
      }else{
          
      //解析为对象
      user=JSON.parse(user);

      //设置头像
      this.photo=user.avatarUrl || require("../assets/img/touxiang.png");

      //设置昵称
      this.nickName=user.nickName || "小王";

      //获取菜单
      //this.getMenus()

      }


  },
  mounted() {

  },
};
</script>

<style >
/* html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
} 
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */

.boxtop{
    height: 50px;
    width: 1000px;
    float: right;
    /* background-color: #F56C6C; */
    position: absolute;
    bottom: 500px;
    left: 200px;
}

.right_bg {
    position: absolute;
    left: 208px;
    top: -3px;
    width: 1050px;
    height: 768px;
   
}

.left_bg {
    background-image: url("../assets/img/back.png");
    position: absolute;
    left: -1px;
    top: -25px;
    width: 210px;
    height: 768px;
    z-index: 3;
}

.editPwd{
  position: relative;
  
}

.head {
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1.2;
    position: relative;
    top: 5px;
    left: 15px;
    z-index: 15;
}

.menu{
    position: relative;
    text-align: left;
    top: 20px;
}

.shouye {
    background-image: url("../assets/img/shouye.png");
    position: relative;
    left: 20px;
    top: 5px;
    width: 15px;
    height: 15px;
    z-index: 5;
}

.shouyetext {
    font-size: 15px;
    font-family: "Microsoft YaHei UI";
    color: rgb(170, 170, 170);
    line-height: 1.2;
    position: relative;
    left: 50px;
    top: -25px;
    z-index: 6;
}

.system {
    background-image: url("../assets/img/system.png");
    position: relative;
    left: 20px;
    top: -20px;
    width: 18px;
    height: 18px;
    z-index: 16;
}

.systemtext {
    font-size: 15px;
    font-family: "Microsoft YaHei UI";
    color: rgb(170, 170, 170);
    line-height: 1.2;
    position: relative;
    left: 50px;
    top: -53px;
    z-index: 17;
}

.manage {
    font-size: 15px;
    font-family: "Microsoft YaHei UI";
    color: rgb(170, 170, 170);
    line-height: 3;
    position: relative;
    left: 5px;
    top: -50px;
    z-index: 20;
}

.set_name {
    font-size: 15px;
    font-family: "Microsoft YaHei UI";
    color: rgb(44, 44, 44);
    font-weight: bold;
    line-height: 1.2;
    /* text-align: center; */
    position: relative;
    float: left;
    left: 20px;
    top: 0px;
    z-index: 22;
}

.user {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(234, 185, 36);
    line-height: 1.2;
    position: relative;
    left: 750px;
    top: -45px;
    z-index: 80;
}

.touxiang {
    height: 45px;
    height: 45px;
    position: relative;
    margin-left: 600px;
    top: 5px;
}

.tuicgubox {
    width: 71px;
    height: 29px;
    background: #F56C6C;
    border-radius: 15px 15px 15px 15px;
    opacity: 1;
    position: relative;
    left: 850px;
    top: -85px;
}

.text{
    font-size: 15px;
    color: white;
    position: relative;
    text-align: center;
    top: 3px;
}

.box1 {
    background-color: white;
    position: relative;
    left: 20px;
    top: -40px;
    width: 1020px;
    height: 50px;
    /* z-index: 44; */
  }

  .time {
    font-size: 14px;
    font-family: "Microsoft YaHei UI";
    color: rgb(124, 124, 125);
    line-height: 2;
    position: relative;
    left: 20px;
    top: 10px;
    z-index: 56;
  }

  .timeinput {
    position: relative;
    left: 60px;
    top: -35px;
    width: 160px;
    height: 30px;
    z-index: 53;
  }

  .box2 {
    background-color: white;
    position: relative;
    left: 20px;
    top: -20px;
    width: 1020px;
    height: 400px;
    /* z-index: 51; */
  }
  
.serch{
    height: 32px;
    width: 72px;
    background-color: #F56C6C;
    position: relative;
    border-radius: 8px;
    left: 270px;
    top: -83px;
}

.delete{
    height: 32px;
    width: 72px;
    background-color: #F56C6C;
    position: relative;
    border-radius: 8px;
    top: -130px;
    left:380px ;
}

.box2li{
    float: left;
    color: gray;
    margin-top: 20px;
    margin-left: 150px;
}

.detailbox{
    width: 1020px;
    height: 300px;
    /* background-color: chartreuse; */
    position: relative;
    top: 0px;
    display: flex;
    flex-direction: column;
}

.detail{
    width: 1020px;
    height: 30px;
    /* background-color:blue; */
    position: relative;
    color: gray;
    margin-top: 10px;
    flex: 1;
}
  

.date{
    position: relative;
    float: left;
    left: 50px;
}

.name{
    position: relative;
    float: left;
   left: 150px;
}

.address{
    position: relative;
    float: left;
    left: 280px;
}

.detail_edit{
    height: 32px;
    width: 72px;
    background-color: #F56C6C;
    position: relative;
    border-radius: 8px;
    float:right;
    right: 180px;
    top: 12px;
}

.detail_delete{
    height: 32px;
    width: 72px;
    background-color: #F56C6C;
    position: relative;
    border-radius: 8px;
    float:right;
    right: 10px;
    top: 12px;
}
  
  
.all{
    height: 40px;
    width: 160px;
    position: relative;
    /* background-color: rgb(152, 72, 250); */
    background-color: white;
    left: 30px;
    top: -80px;
}

.page{
    height: 40px;
    width: 300px;
    /* background-color: #F56C6C; */
    background-color: white;
    position: relative;
    float: right;
    top: -130px;
    right: 15px;
}

.pageinput{
   position: relative;
   float: right;
   top: -40px;
}
  
/* @media screen and (max-width: 1440px) {
  .loginBox {
    transform: translate(50px, -55%) scale(0.8);
  }

  .ad {
    transform: translate(-100px, -50%) scale(0.8);
  }

  .copy {
    transform: translate(0px, 10px) scale(0.8);
  }
} */

</style>
